<script lang="ts" setup>
import { useBasicInfoStore, useCharacterStore, useConfigStore } from "@/store"

const infoStore = useBasicInfoStore()
const characterStore = useCharacterStore()
const configStore = useConfigStore()
</script>

<template>
  <view class="calc-set-box">
    <view class="calc-set-item">
      <uni-data-select
        v-model="configStore.carry_type" dark class="item-selector" :clear-icon="false"
        placeholder="请选择角色类型" :localdata="characterStore.carry_type_list.map(a => { return { text: a, value: a } })"
      />
    </view>
    <view class="calc-set-item">
      <uni-data-select
        v-model="configStore.scene" dark class="item-selector" :clear-icon="false"
        placeholder="请选择场景" :localdata="(infoStore.scenes_list ?? []).map(a => { return { text: a.name, value: a.id } })"
      />
      <uni-data-select
        v-model="configStore.monster" dark class="item-selector" :clear-icon="false"
        placeholder="请选择怪物" :localdata="(infoStore.monster_list ?? []).map(a => { return { text: a.name, value: a.id } })"
      />
    </view>
    <view v-if="Object.keys(configStore.trigger_set).length > 0">
      <view v-for="(item, i) in infoStore.trigger_list" :key="i" class="calc-set-item">
        <uni-data-select
          v-if="!item['multi-select']" v-model="configStore.trigger_set[item.id.toString()][0]" dark class="item-selector" :clear-icon="false"
          placeholder="请选择" :localdata="item.selectList.map((text, value) => { return { text, value } })"
        />
        <uni-data-multi-select
          v-else v-model="configStore.trigger_set[item.id.toString()]" dark class="item-selector" :clear-icon="false"
          :placeholder="item.selectList[0]" :localdata="item.selectList.slice(1).map((text, value) => { return { text, value: value + 1 } })"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.calc-set-box {
  padding: 10px 0;
  color: #726643;

  .calc-set-item {
    display: flex;
    margin-bottom: 8px;

    .item-title {
      width: 70px;
      line-height: 35px;
    }

    .item-selector {
      width: 100%;

      &:not(:first-child) {
        margin-left: 8px;
      }
    }
  }
}

.tips {
  color: #AA8888;
  position: relative;
  top: -5px;
}
</style>
